<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{info}}</h1>
        <p>喂，{{people}}吗？这里有人不听课！</p>
        <p>还有谁？</p>
        <p>有{{stu.length}}个，有{{stu[5]}}</p>
        <p>他叫{{stuInfo.name}}，是一个{{stuInfo.job}}</p>
        <p>{{! isTrue ? '易烊千玺' : '千纸鹤'}}</p>
        <h1>{{time}}</h1>
        <!-- v-html指令 -->
        <h1 v-html="msg"></h1>
        <!-- v-once指令 -->
        <h3 v-once>{{age-1}}</h3>
        <input type="text" v-model="age">
        <br>
        <!-- <img v-bind:src="pic"> -->
        <!-- <a v-bind:href="target1">{{target1}}</a> -->
        <!-- v-bind是vue中最常用的指令，缩写为 “:” -->
        <!-- <p :erwer="attr1">7777</p> -->
        <img v-bind:src="'../img/pic'+imgIndex+'.png'" width="50%">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm=new Vue({
            el: '#app',
            data: {
                info: '789',
                age: 1,
                msg: `<p style="color:red">777</p>`,
                people: '警察叔叔',
                stu:[1,2,3,4,5,6,7],
                stuInfo:{
                    name: 'Jack Ma',
                    job: 'teacher'
                },
                isTrue:false,
                time: new Date(),
                pic: '../img/patient_pic.png',
                pic1: '../img/title1_bg.png',
                target1: 'xxx.html',
                attr1: 'val001',
                imgIndex:1
            },
            beforeCreate() {
                console.log('beforeCreate')
            },
            created() {
                console.log('created')
            },
            beforeMount() {
                console.log('beforeMount')
            },
            mounted() {
                console.log('mounted')
            },
            beforeUpdate() {
                console.log('beforeUpdate')
                this.time= new Date();
                this.imgIndex >= 4 ? this.imgIndex=1 : this.imgIndex ++
            },
            updated() {
                console.log('updated')
            },
            beforeDestroy() {
                console.log('beforeDestroy')
            },
            destroyed() {
                console.log('destroyed')
            },
        })
    </script>
</body>
</html>